<template>
    <!-- 主页文章列表 -->
    <div class="py-8 w-screen dark:bg-gray-900">
        <div class="max-w-2xl mx-auto px-4 w-full">
            <!-- 文章卡片 -->
            <article v-for="article in articles" :key="article.id" class="p-4 border-b border-gray-300 last:border-b-0 transition-colors duration-200 hover:bg-gray-50
        dark:hover:bg-gray-900 relative
        ">

                <!-- 是否加密 -->
                <div class="absolute h-6 w-6  right-8  top-2">
                    <svg t="1755783694973" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5056" >
                        <path
                            d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240z m460 600H232V536h560v304z"
                            fill="#333333" p-id="5057"></path>
                        <path
                            d="M232 840h560V536H232v304z m280-226a48.01 48.01 0 0 1 28 87v53c0 4.4-3.6 8-8 8h-40c-4.4 0-8-3.6-8-8v-53a48.01 48.01 0 0 1 28-87z"
                            fill="#E6E6E6" p-id="5058"></path>
                        <path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"
                            fill="#333333" p-id="5059"></path>
                    </svg>
                </div>


                <!-- 是否置顶 -->
                <div class="absolute h-4 w-4  right-2 top-2 md:h-6 md:w-6">
                    <svg t="1755179087549" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5708" >
                        <path
                            d="M951.296 424.96L1024 352.256 671.744 0 599.04 72.704l70.144 70.656-168.96 168.96a296.96 296.96 0 0 0-286.72 75.264L143.36 458.24 72.704 387.584 0 460.8l245.248 245.248-139.776 139.776 72.704 72.704 140.288-140.288L563.2 1024l72.704-72.704-70.144-70.656 70.144-70.144a296.96 296.96 0 0 0 75.776-287.232l168.96-168.96z"
                            fill="#333333" p-id="5709"></path>
                    </svg>
                </div>

                <div class="flex flex-col">
                    <!-- 元信息 -->
                    <div class="flex items-center space-x-1.5 mb-2">
                        <!-- 作者标签 -->
                        <span
                            class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-50 text-green-800 dark:bg-green-900 dark:text-green-300">
                            {{ article.author }}
                        </span>
                        <!-- 阅读时间 -->
                        <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-50 text-blue-800
            dark:bg-blue-900 dark:text-blue-300">
                            {{ article.readTime }}
                        </span>
                        <!-- 发布日期 -->
                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ article.date }}</span>
                    </div>

                    <!-- 标题 -->
                    <h2  @click="navigateTo('/articles/content/2')" class="text-lg font-semibold text-gray-800 dark:text-gray-300">
                        {{ article.title }}
                    </h2>

                    <!-- 摘要 -->
                    <p class="mt-2 text-gray-600 text-sm dark:text-gray-400">
                        {{ article.excerpt }}
                    </p>

                    <!-- 标签 -->
                    <div class="mt-3 flex flex-wrap gap-1.5">
                        <span v-for="(tag, index) in article.tags" :key="index" class="text-xs font-medium bg-gray-100 text-gray-700 px-2 py-0.5 rounded
              dark:bg-gray-800 dark:text-gray-300
              ">
                            {{ tag }}
                        </span>
                    </div>
                </div>
            </article>
            <!-- 分页组件 -->
            <!-- <div class="flex justify-center mt-8">
                <nav
                    class="inline-flex rounded-md shadow-sm overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                    <button
                        class="px-3 py-2 text-gray-500 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition disabled:opacity-50"
                        :disabled="currentPage === 1" @click="currentPage--">
                        上一页
                    </button>
                    <button v-if="paginationPages[0] > 1"
                        class="px-3 py-2 text-gray-700 dark:text-gray-200 font-semibold"
                        @click="currentPage = 1">1</button>
                    <span v-if="paginationPages[0] > 2" class="px-2 py-2 text-gray-400 dark:text-gray-500">...</span>
                    <button v-for="page in paginationPages" :key="page"
                        class="px-3 py-2 text-gray-700 dark:text-gray-200 font-semibold hover:bg-blue-100 dark:hover:bg-gray-700 transition"
                        :class="{ 'bg-blue-100 dark:bg-gray-700': page === currentPage }" @click="currentPage = page">
                        {{ page }}
                    </button>
                    <span v-if="paginationPages[paginationPages.length - 1] < totalPages - 1"
                        class="px-2 py-2 text-gray-400 dark:text-gray-500">...</span>
                    <button v-if="paginationPages[paginationPages.length - 1] < totalPages"
                        class="px-3 py-2 text-gray-700 dark:text-gray-200 font-semibold"
                        @click="currentPage = totalPages">{{ totalPages }}</button>
                    <button
                        class="px-3 py-2 text-gray-500 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition disabled:opacity-50"
                        :disabled="currentPage === totalPages" @click="currentPage++">
                        下一页
                    </button>
                </nav>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';
let router = useRouter()
function navigateTo(name: string) {
    router.push(name)
}
// 示例文章数据
const articles = [
    {
        id: 1,
        title: "Linux中samba的部署及gdb命令调试",
        excerpt: "探索Vue3响应式机制的工作原理和优化策略",
        date: "2023-11-02",
        readTime: "5分钟",
        author: "张三", // 新增作者
        tags: ["Vue3", "JavaScript"]
    },
    {
        id: 2,
        title: "Tailwind CSS实战技巧",
        excerpt: "分享高效使用Tailwind CSS的技巧和实践经验",
        date: "2023-10-28",
        readTime: "8分钟",
        author: "李四", // 新增作者
        tags: ["CSS", "Tailwind"]
    },
    {
        id: 3,
        title: "前端性能优化指南",
        excerpt: "现代Web应用的性能优化策略和技术要点",
        date: "2023-10-15",
        readTime: "10分钟",
        author: "王五", // 新增作者
        tags: ["性能优化", "Web开发"]
    }
]


</script>

<style scoped>
.delete-icon {
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}
.delete-icon:hover svg {
    filter: drop-shadow(0 2px 8px #d81e06aa);
    transform: scale(1.15);
}
.delete-icon:hover path {
    fill: #ff4d4f !important;
}
</style>